<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="./icon/logo.ico" type="image/x-icon">
    <title>酷炫元素周期表</title>
</head>

<body>
    <!-- 整个项目 -->
    <div id='all'>
        <!-- 左侧 -->
        <div id='main'>
            <!-- UL区域 -->
            <div id='list'>
                <ul>这是开发时用于ul的定位，在css中修改背景颜色后随即不显示

                    <!-- <li>
                        <b class="cover"></b>
                        <p class="title">1&nbsp&nbspH</p>
                        <p class="author">氢</p>
                        <p class="time">1.008</p>
                    </li> -->

                </ul>
            </div>
            <!-- 按钮 -->
            <div id='btn'>
                <ul>
                    <li>平铺</li>
                    <li>螺旋</li>
                    <li>球体</li>
                    <li>网格</li>
                    <!-- <li>立方</li> -->
                </ul>
            </div>
            <!-- 弹窗 -->
            <!-- 弹窗区域 -->
            <div id="alert">
                <!-- 标题 -->
                <div class="title">
                    <span>课题: 我感觉你在为难我</span>
                </div>

                <!-- 图片 -->
                <div class="img">
                    <img src="./img/test.png" alt="">
                    <p style="color: antiquewhite;">测试版，图片素材未完全添加</p>
                </div>

                <!-- 作者 -->
                <div class="author">
                    <span>主讲: 你好</span>
                </div>

                <!-- 项目描述信息 -->
                <div class="info">
                    <span>描述: 这大概是我讲过最屌的案例了...</span>
                </div>
            </div>
            <!-- 返回按钮 -->
            <div id="back">返回

            </div>
            <!-- 网页效果介绍 -->
            <div id=introduce>
                <div class="icon">效果介绍点我</div>
                <div class="intro-alert">
                    <h2>网页基本功能介绍</h2>
                    <p>为了完整展示效果，请在chrome浏览器中打开网页</p>
                    <h3>(一)动画效果</h3>
                    <p> 1. 打开页面后鼠标不动等待八秒左右，界面轮播效果启动，会在平铺、螺旋、球体、 网格四个状态下依次顺序切换效果，每次切换时间为三秒。鼠标移动后，轮播效果关闭，鼠标静置十秒后， 轮播再次启动，从当前状态开始动画；
                    </p>
                    <p>2. 鼠标移入每个元素时，元素触发心跳样式动画；</p>
                    <p>3. 鼠标移入样式切换按钮时，触发按钮动画。</p>
                    <h3>（二）鼠标效果</h3>
                    <p> 1. 按住鼠标上下左右拖动；</p>
                    <p>2. 鼠标滚轮上下滚动；</p>
                    <p> 3. 鼠标点击元素；</p>
                    <p>4. 出现弹窗后，鼠标点击弹窗；</p>
                    <p> 5. 在小猫页面鼠标拖动，滚轮滚动，点击返回按钮。</p>
                </div>
            </div>
        </div>
        <!-- 右侧 -->
        <iframe id="frame" scrolling='no' src="" frameborder="0"></iframe>
    </div>

    <script src="./js/date.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>